<template>
	<view :class="themeClass" class="container">
		<Suspense v-if="weatherNowComponent">
			<component :is="weatherNowComponent" :location='loc_info'></component>
			<template #fallback>
				<view>加载中...</view>
			</template>
		</Suspense>
		<Suspense v-if="weatherHoursComponent">
			<component :is="weatherHoursComponent" :location="latlng"></component>
			<template #fallback>
				<view>加载中...</view>
			</template>
		</Suspense>

		<Suspense v-if="weatherIndexComponent">
			<component :is="weatherIndexComponent" :location="latlng"></component>
			<template #fallback>
				<view>加载中...</view>
			</template>
		</Suspense>
		<view v-if="new Date()<hideDate" class="theme-selector">
			<button @click="setTheme('spring')">春天</button>
			<button @click="setTheme('summer')">夏天</button>
			<button @click="setTheme('autumn')">秋天</button>
			<button @click="setTheme('winter')">冬天</button>
		</view>
	</view>
</template>
<script setup>
	import {
		onBeforeMount,
		onMounted,
		ref,
		watch
	} from 'vue';
	import {
		host,
		key
	} from '@/common/weather_api';
	import {
		getSeason,
		loadCSS
	} from '@/common/utils';
	import WeatherNow from '@/components/weather_now/weather_now.vue';
	import WeatherHours from '@/components/weather_hours/weather_hours.vue';
	import WeatherIndex from '@/components/weather_index/weather_index.vue';

	const hideDate = new Date("2025-04-25") // 设定隐藏时间

	const weatherNowComponent = ref(null);
	const loc_info = ref(null);
	const latlng = ref('116.39,39.90'); //默认位置

	const weatherHoursComponent = ref(null);
	const weatherIndexComponent = ref(null);

	// 获取定位信息并加载子组件
	const getLocation = () => {
		uni.getLocation({
			type: 'wgs84',
			success: (res) => {
				latlng.value = res.longitude.toFixed(2) + ',' + res.latitude.toFixed(2);
			},
			fail: (err) => {
				uni.showToast({
					title: '定位失败,启用默认位置',
					duration: 2000
				})
				// console.log('定位失败:' + err.errMsg)
			},
			complete: () => {
				getCity(latlng.value);
			}
		});
	};

	const getCity = (latlng) => {
		const api_url = `https://${host}/geo/v2/city/lookup?location=${latlng}&key=${key}`;
		uni.request({
			url: api_url,
			method: 'GET',
			success: (res) => {
				let {
					id,
					name,
					adm1,
					adm2,
				} = res.data.location[0];

				loc_info.value = {
					id,
					name,
					adm1,
					adm2
				};
			},
			fail: (err) => {
				uni.showToast({
					title: '获取城市信息失败:' + err,
					duration: 2000
				});
				// console.log('获取城市信息失败：', err)
			},

			complete: () => {
				// 直接赋值，而不是异步加载
				weatherNowComponent.value = WeatherNow;
				weatherHoursComponent.value = WeatherHours;
				weatherIndexComponent.value = WeatherIndex;
			},
		});
	};

	// loadCSS(`/static/${getSeason()}/theme.css`); //加载主题样式，打包后不行了
	const themeClass = ref("theme-spring");
	const setTheme = (theme) => {
		themeClass.value = `theme-${theme}`;
	};
	onMounted(() => {
		setTheme(getSeason());
		getLocation(); // 调用定位
	});
</script>
<style lang="scss" scoped>
	@import url('https://cdn.jsdelivr.net/npm/qweather-icons@1.6.0/font/qweather-icons.css');

	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 100vh;
		background-image: var(--background-image);
		background-size: cover;
		background-repeat: no-repeat;
		color: var(--text-color);
	}

	.content {
		flex: 1; // 让内容区填充剩余空间，使 `theme-selector` 贴底
	}

	.theme-selector {
		display: flex;
		justify-content: center;
		gap: 8px;
		padding: 10px;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 10px;
	}
</style>